@import "../../styles/base";

.login-page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

  .logo-box {
    display: flex;
    justify-content: center;
    margin-top: 102px;
    width: 100%;

    .logo {
      height: 197px;
      width: 155px;
    }
  }

  .description-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* justify-content: center; */
    .big-desc {
      margin-top: 41px;
      margin-bottom: 37px;
      font-size: 36px;
      line-height: 36px;
      color: $font-color-dark;
    }

    .detail-desc {
      font-size: 24px;
      line-height: 24px;
      color: $font-color-grey;
    }
  }

  .input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 42px;

    .input-container {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background-color: $bg-color-base;
      box-sizing: border-box;
      width: 516px;
      height: 100px;
      border: 1.2px solid $border-color-light;
      border-radius: 50px;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-left: 43px;
      padding-right: 34px;
      margin-bottom: 42px;

      .placeholder {
        color: $font-color-placeholder;
      }

      .icon-delete {
        height: 50px;
        width: 50px;
        color: $font-color-delete-icon;
        font-size: 34px;
        line-height: 50px;
      }

      .get-code {
        font-size: 30px;
        line-height: 1.33;
        color: $font-color-grey;
      }
    }

    .input {
      width: 80%;
      font-size: 28px;
      line-height: 28px;
      color: $color-primary;
    }

    .focus {
      border-color: $color-primary !important;
    }

    .error {
      align-self: flex-start;
      font-size: 24px;
      line-height: 24px;
      color: $font-color-error;
      margin-left: 35px;
      margin-top: -17px;
      margin-bottom: 42px;
    }

    .error-icon {
      font-size: 30px;
      margin-right: 10px;
    }

  }

  .button-box {
    width: 516px;
    height: 106px;
  }
}
